const user_event_message = {
    template:`
           <div>
                <div class="my-3">
                    <a :to="{name:'user.event.index'}" class="text-primary">Events</a>
                    <span class="text-primary">/</span>
                    <router-link :to="{name:'user.event.preview',params:{event_code:event_code}}" class="text-primary text-uppercase">{{event_code}}</router-link>
                    <span class="">/</span>
                    Messages
                </div>
                <div class="d-flex justify-content-between flex-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Message Board</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group mr-2">
                            <button @click="$router.go(-1)" class="btn btn-secondary btn-sm">Back</button>
                        </div>
                    </div>
                </div>
                <div class="border messages_box px-2 py-2" ref="message_box">
                    <div class="text-center my-2" v-if="messages == null">
                        <span class="not_has_message_bg text-light px-4 py-1">Not has message yet</span>
                    </div>
                    <div v-for="(item,index) in messages" :key="index" :class="'item mt-4 re_reply re_reply-'+item.is_reply">
                        <span class="d-block text-secondary messages_date">{{item.created_datetime}}</span>
                        <span class="content">{{item.content}}</span>
                    </div>
                </div>
                <div class="messages_input_box mt-4">
                    <div class="form-group">
                        <div class="input-group">
                            <textarea class="form-control" placeholder="Leave a message~" v-model="form.content"></textarea>
                            <button class="btn btn-primary" @click="send_message">Send</button>
                        </div>
                    </div>
                </div>
            </div>    
    `,
    props:['event_code','event_phone'],
    data(){
        return {
            event:null,
            messages:null,
            timer:null,
            form:{
                content:null,
                is_reply: 0
            }
        }
    },
    methods:{
        get_messages(){
            ajax.get(`message/${this.event.id}`).then(res =>{
                this.messages = res.data.data;
            })
        },
        send_message(){
            ajax.post(`message/${this.event.id}`,this.form).then(res=>{
                if (res.status === 200){
                    this.get_messages();
                }
            })
        },
        get_event(){
            ajax.get(`event/preview/${this.event_code}/${this.event_phone}`).then(res=>{
                if (res.status === 200){
                    this.event = res.data.data;
                    this.get_messages();
                }
            })
        },
    },
    mounted(){
        this.get_event();
        this.timer = setInterval(()=>{
            this.get_messages()
        },1000)
    },
    updated(){
        this.$refs.message_box.scrollTop = this.$refs.message_box.scrollHeight;
    },
    destroyed(){
        clearInterval(this.timer);
    }}
;